<template>
  <div class="detail">
    <div v-show="isshow">
      <div class="detail-img">
        <el-button icon="el-icon-arrow-left" circle @click="back()"></el-button>
        <img :src="this.filmdetail.poster" />
      </div>
      <div class="detail-txt">
        <div class="title">
          <p>
            {{ this.filmdetail.name
            }}<span v-if="this.filmdetail.filmType">{{
              this.filmdetail.filmType.name
            }}</span>
          </p>
          <i>{{ this.filmdetail.grade }}<span>分</span></i>
        </div>
        <div class="type">{{ this.filmdetail.category }}</div>
        <div class="time">{{ this.filmdetail.premiereAt }}上映</div>
        <div class="country">
          {{ this.filmdetail.nation }} | {{ this.filmdetail.runtime }}分钟
        </div>
        <div
          class="txt"
          ref="txt"
          :style="{ transition: '0.3s', height: heights + 'px' }"
        >
          {{ this.filmdetail.synopsis }}
        </div>
        <div class="font" @click="zhankai()">
          <i v-show="isshow2" class="el-icon-arrow-down"></i>
          <i v-show="!isshow2" class="el-icon-arrow-up"></i>
        </div>
      </div>
      <div class="actors">
        <div class="titel"><p>演职人员</p></div>
        <div class="actors-img">
          <ul>
            <li v-for="(item, index) in filmdetail.actors" :key="index">
              <img :src="item.avatarAddress" />
              <p>{{ item.name }}</p>
              <p>{{ item.role }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="photos">
        <div class="titel">
          <p>剧照</p>
          <span @click="isshow = !isshow"
            >全部({{
              this.filmdetail.photos ? this.filmdetail.photos.length : 0
            }})<i class="el-icon-arrow-right"></i
          ></span>
        </div>
        <div class="photos-img">
          <ul>
            <li
              v-for="(item, index) in this.filmdetail.photos"
              :key="index"
              @click="isshow = !isshow"
            >
              <img :src="item" />
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div v-if="!isshow" class="photos-swiper">
      <div class="title">
        <i class="el-icon-close" @click="isshow = !isshow"></i
        ><span v-if="this.filmdetail.photos">{{ this.filmdetail.name }}</span>
      </div>
      <el-carousel indicator-position="none" :autoplay="true">
        <el-carousel-item
          v-for="(item, index) in this.filmdetail.photos"
          :key="index"
        >
          <img :src="item" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <button v-show="isshow" class="btn">选座购票</button>
  </div>
</template>
<script>
import axios from "@/uitls/request.js";
export default {
  data() {
    return {
      id: "",
      filmdetail: "",
      isshow: true,
      isshow2: true,
      heights: null,
      heights2: null,
      num: 1,
      path:''
    };
  },
  created() {
    this.getdetail();
  },
  mounted() {
    
  },
  methods: {
    getdetail() {
      this.id = this.$route.params.filmId;
      this.path=this.$route.params.path
      console.log(this.$route.params)
      axios({
        url: `gateway?filmId=${this.id}`,
        data: {
          xHost: "mall.film-ticket.film.info",
        },
      })
        .then((res) => {
          this.filmdetail = res.data.film;
          console.log(this.filmdetail);
          this.time();
          this.txt();
        })
        .then(() => {
          this.heights2 = this.$refs.txt.clientHeight;
          if (this.heights != 38) {
            this.heights = 38;
          }
        });
    },
    back() {
      this.$router.push(this.path);
    },
    zhankai() {
      if (this.isshow2 == true) {
        this.heights = this.heights2;
      } else {
        this.heights = 38;
      }
      this.isshow2 = !this.isshow2;
    },
    time() {
      let data = this.filmdetail.premiereAt;
      var time = new Date(data * 1000);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      this.filmdetail.premiereAt =
        y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
    },
    txt() {
      var t = this.filmdetail.category.split("|");
      var T = [];
      t.map((item, index) => {
        if (index >= t.length - 1) {
          T += item;
          return T;
        } else {
          T += item + " | ";
          return T;
        }
      });
      this.filmdetail.category = T.toString();
    },
  },
};
</script>
<style scoped lang='less'>
.detail {
  position: relative;
  .detail-img {
    width: 100%;
    height: 4.2rem;
    overflow: hidden;
    position: relative;
    .el-button.is-circle {
      position: absolute;
      z-index: 1;
      padding: 0.1rem;
      top: 8px;
      left: 12px;
    }
    .el-button {
      color: black;
      background-color: rgba(212, 212, 212, 0.7);
      font-size: 0.3rem;
    }
    img {
      width: 100%;
      height: 10rem;
      position: absolute;
      top: -70%;
    }
  }
  .detail-txt {
    width: 100%;
    padding: 0.24rem 0.3rem;
    background-color: #fff;
    .title {
      width: 100%;
      height: 0.48rem;
      display: flex;
      justify-content: space-between;
      p {
        font-size: 18px;
        color: #191a1b;
        font-weight: normal;
        span {
          font-size: 0.18rem;
          color: #fff;
          background-color: #d2d6dc;
          margin-left: 0.14rem;
          padding: 0 0.04rem;
          border-radius: 0.04rem;
          vertical-align: middle;
        }
      }
      i {
        color: #ffb232;
        font-size: 18px;
        span {
          font-size: 10px;
          font-style: normal;
        }
      }
    }
  }
  .type {
    width: 100%;
    height: 0.4rem;
    color: #797d82;
    font-size: 0.26rem;
    margin-top: 5px;
  }
  .time {
    width: 100%;
    height: 0.4rem;
    color: #797d82;
    font-size: 0.26rem;
    margin-top: 5px;
  }
  .country {
    width: 100%;
    height: 0.4rem;
    color: #797d82;
    font-size: 0.26rem;
    margin-top: 5px;
  }
  .txt {
    font-size: 0.26rem;
    color: #797d82;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.24rem;
    line-height: 0.36rem;
  }
  .font {
    position: relative;
    i {
      position: absolute;
      display: block;
      left: 50%;
      margin-left: -0.13rem;
      font-size: 0.26rem;
      color: #2c3e50;
    }
  }
  .actors {
    width: 100%;
    height: 3.8rem;
    margin-top: 10px;
    background-color: #fff;
    .titel {
      padding: 0.3rem;
      p {
        width: 100%;
        height: 0.45rem;
        font-size: 0.32rem;
        color: #191a1b;
      }
    }
    .actors-img {
      width: 100%;
      height: 2.8rem;
      overflow: hidden;
      overflow-x: scroll;
      position: relative;
      ul {
        display: flex;
        position: absolute;
        overflow: hidden;
        margin-left: 0.3rem;
        li {
          width: 1.7rem;
          margin-right: 0.2rem;
          overflow: hidden;
          img {
            width: 100%;
            height: 1.7rem;
          }
          p:nth-child(2) {
            width: 1.7rem;
            font-size: 0.24rem;
            color: #191a1b;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          p:nth-child(3) {
            width: 1.7rem;
            color: #797d82;
            text-align: center;
            font-size: 0.1rem;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .actors-img::-webkit-scrollbar {
      display: none;
    }
  }
  .photos {
    width: 100%;
    height: 3.54rem;
    margin-top: 0.2rem;
    margin-bottom: 1.2rem;
    background-color: #fff;
    .titel {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 1.24rem;
      padding: 0.3rem;
      p {
        font-size: 0.32rem;
        color: #191a1b;
      }
      span {
        font-size: 0.26rem;
        color: #797d82;
      }
    }
    .photos-img {
      width: 100%;
      height: 2.3rem;
      overflow: hidden;
      overflow-x: scroll;
      position: relative;
      ul {
        position: absolute;
        display: flex;
        height: 2rem;
        padding-left: 0.3rem;
        li {
          overflow: hidden;
          img {
            width: 3rem;
            height: 3rem;
            margin-right: 0.2rem;
          }
        }
      }
    }
    .photos-img::-webkit-scrollbar {
      display: none;
    }
  }
  .btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1rem;
    background-color: #ff5f16;
    font-size: 0.32rem;
    border: none;
    color: #fff;
  }
}
.photos-swiper {
  width: 100%;
  height: 100%;
  background-color: black;
  .title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0.9rem;
    i {
      font-size: 0.5rem;
      color: #fff;
      position: absolute;
      left: 0.1rem;
    }
    span {
      color: #fff;
      font-size: 0.34rem;
    }
  }
  /deep/ .el-carousel__container {
    height: 12.44rem;
    img {
      width: 100%;
      height: 93%;
    }
  }
}
</style>